<script setup></script>

<template>
  <div class="u-tree">
    <el-tree v-bind="$attrs" class="custom-tree"> </el-tree>
  </div>
</template>

<style lang="scss" scoped>
.u-tree {
  .custom-tree {
    :deep(.el-tree-node) {
      margin: 4px 0;

      .el-tree-node__content {
        height: 36px;
        &:hover {
          background-color: #f5f7fa;
        }
      }

      .el-tree-node__expand-icon {
        color: #606266;
        font-size: 16px;
        padding: 0 4px;
      }

      &.is-current {
        & > .el-tree-node__content {
          background-color: #ecf5ff;
          color: #409eff;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
